<template>
    <el-dialog v-model="visible" @close="cancel" :close-on-click-modal="false" width="30%">
        <el-radio-group v-model="radio1">
            <el-radio v-for="item in listImg" :key="item" :value="item" border style="margin-top:20px;width: 100%;height: auto;padding: 10px;">
                <img :src="item" alt="" style="width: 100%;height: auto;">
            </el-radio>
        </el-radio-group>
        <template #footer>
            <el-button type="primary" @click="ok()">确定</el-button>
        </template>
    </el-dialog>

</template>

<script setup lang="ts">
import { reactive, ref, shallowRef, watch, onBeforeUnmount, nextTick } from 'vue'
const visible = ref(false)
const radio1 = ref('') //选中的图片

const props = defineProps({
	listImg: {
		type: Array as PropType<any[]>,
		required: false,
		default: () => []
	}
})

//弹窗初始化
const init = (imgUrl) => {
	visible.value = true
	radio1.value = imgUrl
}
const emit = defineEmits(['selectImgOk']) //子组件调父组件方法
const ok = () => {
	visible.value = false
	emit('selectImgOk', radio1.value)
}

defineExpose({
	init
})
</script>
<style lang="scss" scoped>
</style>
